<template>
	<view class="bill-detail-page">
		<detail-head url="../mine/mine" type="none"></detail-head>
		<view class="content">
			<view class="info">
				<button type="default" v-if="state==='HAVE' && detail.id" class="open-btn"
					@click="onOpenBocClick">开启盲盒</button>
				<view class="title">支付成功</view>
				<view class="prod">
					<image :src="detail.subPctureUrl" mode="aspectFit"></image>
					<view class="detail">
						<view class="name">{{detail.boxName}}</view>
						<view class="item">
							<view class="isopen">未开启</view>
						</view>
						<view class="item">
							<view class="label">金额</view>
							<view class="value">￥{{detail.price}}</view>
						</view>
					</view>
				</view>
				<view class="subtitle">盲盒说明</view>
				<button v-if="state === 'HAVE' && config.sale_btn && detail.id" class="sale-btn" type="default"
					@click="onSaleClick" :loading="btnLoading">出售盲盒</button>
				<button v-if="state === 'INTHESELL' && detail.id" class="sale-btn" type="default" @click="onCancelPay"
					:loading="btnLoading">取消出售</button>
			</view>
		</view>
		<uni-popup ref="openBox" type="bottom">
			<view class="popup">
				<view class="content">
					<image class="back-img" :src="backImg" mode="" @load="onImgLoad"></image>
					<image class="prod-img" :src="imgUrl" mode="aspectFit"></image>
				</view>
				<view class="operate" v-show="imgUrl">
					<button class="btn" type="default"
						@click="closePopup('openBox');$tool.navigateTo(`/pages/mine/prod-detail?id=${worksId}`)">查看作品</button>
					<button class="btn" type="default" @click="closePopup('openBox');$tool.navigateTo('/pages/mine/mine')">个人中心</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		cancelPay,
		getPayDetails,
	} from '../../request/bill.js'
	import {
		openBox,
		cancelSale,
		getBlindBoxDetails,
	} from '../../request/blindBox-api.js'
	export default {
		data() {
			return {
				// 详情
				detail: {},
				// 状态
				state: '',
				// 盲盒奖品图片
				imgUrl: '',
				// 奖品id
				prizeId: null,
				// 按钮状态
				btnLoading: false,
				// 作品ID
				worksId: null,
				// 预备img
				ybImg: '',
				// gif
				backImg: 'https://skyskys.oss-cn-beijing.aliyuncs.com/open.gif',
			}
		},
		onLoad(option) {
			this.state = option.state
			this.onloadDetail(option.id)
		},
		methods: {
			// 打开弹框
			openPopup(val) {
				this.$refs[val].open('buttom')
			},

			// 关闭弹框
			closePopup(val) {
				this.$refs[val].close()
			},

			// 出售盲盒
			onSaleClick() {
				this.$tool.navigateTo(`/pages/sale/sale-box?id=${this.detail.id}`)
			},

			onImgLoad() {
				uni.hideLoading()
				setTimeout(() => {
					this.imgUrl = this.ybImg
				}, 1200)
			},

			// 开启盲盒
			async onOpenBocClick() {
				uni.showLoading({
					title: '开启中...'
				})
				this.backImg = this.backImg + `?time=` + new Date().getTime()
				try {
					let {
						code,
						message,
						data
					} = await openBox(this.detail.id)
					if (code === 200) {
						this.openPopup('openBox')
						this.worksId = data.worksId
						this.ybImg = data.pictureUrl
						uni.setStorageSync('updateBox', 'update')
					} else {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
				} catch (err) {
					uni.hideLoading()
					this.$tool.showErr(err)
				}

			},

			// 加载订单详情
			async onloadDetail(id) {
				try {
					let {
						code,
						message,
						data
					} = await getBlindBoxDetails(id)
					if (code === 200) {
						this.detail = data
						this.optData = data.boxContentVOList
					} else {
						uni.showToast({
							title: message,
							icon: 'error'
						})
					}
				} catch (err) {
					this.$tool.showErr(err)
				}
			},

			// 取消订单
			async onCancelPay() {
				this.btnLoading = true
				try {
					let {
						code,
						message,
						data
					} = await cancelSale(this.detail.id)
					if (code === 200) {
						uni.showToast({
							title: '出售取消成功',
							icon: 'success'
						})
						this.$tool.navigateTo('/pages/mine/mine')
					} else {
						uni.showToast({
							title: message,
							icon: 'none'
						})
					}
				} catch (err) {
					this.$tool.showErr(err)
				}
				this.btnLoading = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bill-detail-page {
		width: 100%;
		min-height: 100vh;
		background: $login-background-url no-repeat;
		background-size: 100% 100%;
		background-position: 0 0;
	}

	.content {
		width: 100%;
		padding: 0 20rpx;
		margin-top: 80rpx;
		margin-bottom: 80rpx;
	}

	.info {
		height: 1152rpx;
		width: 100%;
		padding: 180rpx 40rpx 0 40rpx;
		background: $sale-back-url no-repeat;
		background-size: 100% 100%;
		background-position: 0 0;
		position: relative;

		.time {
			width: 100%;
			height: 64rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 20rpx;
			left: 50%;
			transform: translateX(-50%);

			text {
				color: #979797;
				margin-right: 20rpx;
			}

		}

		.title {
			line-height: 64rpx;
			text-align: center;
			font-size: 14px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFBD47;
		}

		.subtitle {
			font-size: 18px;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #9D9D9D;
		}

		.prod {
			width: 100%;
			height: 240rpx;
			// padding: 20rpx 0 20rpx 10rpx;
			margin: 40rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-between;

			border: 1px solid #979797;
			border-left: none;
			border-right: none;

			image {
				width: 190rpx;
				height: 190rpx;
				margin-right: 20rpx;
			}

			.detail {
				flex: 1;
				height: 200rpx;
				padding: 10rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-between;

				.name {
					width: 100%;
					text-align: left;
					font-size: 16px;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #9D9D9D;
				}

				.item {
					width: 100%;
					height: 48rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.isopen {
						padding: 0 10rpx;
						border-radius: 0px 16rpx 0px 16rpx;
						border: 2rpx dashed #FFBD47;
						color: #F5FFA6;
						margin-right: 10rpx;
					}

					.label {
						width: 50rpx;
						font-size: 24rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 500;
						color: #979797;
					}

					.value {
						flex: 1;
						text-align: right;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #979797;
					}
				}
			}
		}

		.price {
			width: 100%;
			height: 68rpx;
			margin: 20rpx 0;
			border-radius: 16rpx;
			background: linear-gradient(#383838, #050505);
			display: flex;

			input {
				width: 100%;
				height: 100%;
				text-indent: 20rpx;
				color: #979797;
			}

			.icon {
				width: 60rpx;
				height: 100%;
				text-align: center;
				line-height: 64rpx;
				color: #FFBD47;
			}
		}

		.desc {
			margin: 40rpx 0;
			font-size: 12px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #979797;
		}

		.sale-btn,
		.open-btn {
			flex: 1;
			margin-top: 80rpx;
			color: #FFBD47;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #121212;
			box-shadow: -10px -10px 20px 0px rgba(39, 39, 39, 0.54), 10px 10px 20px 0px rgba(0, 0, 0, 0.83);
			border-radius: 22px;
			border: 1px solid #FFBD47;
		}

		.open-btn {
			width: 280rpx;
			height: 88rpx;
			position: absolute;
			top: -110rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}

	.popup {
		width: 100%;
		height: 100vh;
		position: relative;

		.content {
			width: 100%;
			height: 100%;
			padding: 0;
			position: relative;

			.back-img {
				width: 100%;
				height: 100%;
			}

			.prod-img {
				width: 600rpx;
				height: 640rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				z-index: 2;
				transform: translateX(-50%) translateY(-50%);
			}
		}

		.operate {
			width: 100%;
			height: 120rpx;
			display: flex;
			align-items: center;
			position: absolute;
			bottom: 0;
			left: 0;

			.btn {
				flex: 1;
				margin: 0 40rpx;
				color: #FFBD47;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #121212;
				box-shadow: -10px -10px 20px 0px rgba(39, 39, 39, 0.54), 10px 10px 20px 0px rgba(0, 0, 0, 0.83);
				border-radius: 22px;
				border: 1px solid #FFBD47;
			}
		}

	}
</style>
